<template>
	<view class="container">
		<Header>
			大会发言
		</Header>
		<view class="content">
			<view class="tabs">
				<view class="tab-item" :class="{active: defaultIndex==0}" @click="tabClick(0)">
					提交发言稿
				</view>
				<view class="tab-item" :class="{active: defaultIndex==1}" @click="tabClick(1)">
					我的发言稿
				</view>
			</view>
			<view style="height: calc(100vh - 100px - var(--status-bar-height));">
				<SpeakForm :id="speakId" v-if="defaultIndex == 0"></SpeakForm>
				<SpeakList v-if="defaultIndex == 1"></SpeakList>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '../../components/header.vue'
	import SpeakForm from './speakForm.vue'
	import SpeakList from './speakList.vue'
	export default {
		components: {
			Header,
			SpeakForm,
			SpeakList
		},
		data() {
			return {
				defaultIndex: 0,
				speakId:''
			}
		},
		onLoad() {

		},
		mounted() {
			uni.$on('showContent', (data) => {
				if(data.page == 'form'){
					this.defaultIndex = 1
					this.speakId = ''
				}else {
					this.defaultIndex = 0
					this.speakId = data.id
				}
			})
		},
		methods: {

			tabClick(index) {
				if(index != 0) this.speakId = ''
				this.defaultIndex = index
			}
		}
	}
</script>

<style scoped>
	.container{
		background-color: #f9f9f9;
		min-height: 100vh;
	}
	
	.tabs{
		border: 1px solid #2C60BE;
		color: #2C60BE;
		background-color: #fff;
		display: flex;
		margin: 10px 30px;
		height: 40px;
		line-height: 40px;
		border-radius: 8px;
		overflow: hidden;
	}
	.tab-item{
		width: 50%;
		text-align: center;
	}
	.active{
		background-color: #2C60BE;
		color: #fff;
	}
</style>